<template>
    <div class="table-header flex flex-between mb-10">
        <div></div>
        <div class="btn-group">
            <el-button>
                <el-icon>
                    <Refresh />
                </el-icon>
                刷新
            </el-button>
            <el-button type="success">
                <el-icon>
                    <CirclePlus />
                </el-icon>
                新增
            </el-button>
            <el-button type="danger">
                <el-icon>
                    <Delete />
                </el-icon>
                批量删除
            </el-button>
        </div>
    </div>
    
    <el-table ref="multipleTableRef" :data="tableData" row-key="id" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" :selectable="selectable" width="55" />
        <el-table-column :label="item.label" :width="item.width" v-for="item,index in columns" :key="index">
            <template #default="scope">
                {{ scope.row[item.field] }}
            </template>
        </el-table-column>
        <!-- <el-table-column property="name" label="Name" width="120" />
                                    <el-table-column property="address" label="Address" /> -->
    </el-table>
</template>

<script setup>
import { ref } from 'vue'
const columns = [
  { label: '分类ID', field: 'id', width: 60 },
  { label: '分类名称', field: 'name' },
]
const multipleTableRef = ref()
const multipleSelection = ref([])


const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

const tableData = ref([])
</script>
